<template>
  <ex-dialog width="800px" class="ex-diolog" :title="title" :visible="visible" :close-on-click-modal="true"
    @closeDialog="handleClose">
    <div class="main" v-loading="loading">
      <el-steps :active="active" align-center finish-status="success">
        <el-step :title="item.title" :description="item.description" v-for="(item,index) in stepList" :key="index">
          <template slot="description">
            <div>{{item.time}}</div>
            <div>{{item.description}}</div>
          </template>
        </el-step>
      </el-steps>
      <div class="cause" v-if="info.refusal">拒绝退款原因：{{info.refusal}}</div>
    </div>
  </ex-dialog>
</template>
<script>
  import Loading from "@/components/Loading/index";
  // api
  import {
    customerCardReturnDetail
  } from "@/api/moneyManagement";

  export default {
    components: {
      Loading,
    },
    props: {
      visible: Boolean,
      id: String,
    },
    data() {
      return {
        labelWidth: '100px',
        inputWidth: '300px',
        title: '退卡审核记录',
        loading: false,
        active: 1, //审核步骤
        info: {}, //信息
        stepList: [],
      };
    },
    computed: {},
    created() {

    },
    mounted() {
      this.getInfo()
    },
    methods: {
      //取消
      handleClose(formName) {
        this.$emit("update:visible", false);
      },
      getInfo() { //获取信息
        customerCardReturnDetail(this.id).then((res) => {
          this.info = res.result
          if (res.result.status == 1) { //status:退卡申请状态 1待审核 3同意退款 5拒绝退款
            this.active = 1
            this.stepList = [{
                title: '提交申请',
                description: '',
                time: res.result.refundTime
              },
              {
                title: '商户同意退款',
                // description: '审核账号：' + res.result.merchantPhone,
                time: res.result.agreeTime
              },
              {
                title: '退款成功',
                description: '',
                time: res.result.successTime
              }
            ]
          } else if (res.result.status == 3) {
            this.active = 3
            this.stepList = [{
                title: '提交申请',
                description: '',
                time: res.result.refundTime
              },
              {
                title: '商户同意退款',
                description: '审核账号：' + res.result.merchantPhone,
                time: res.result.agreeTime
              },
              {
                title: '退款成功',
                description: '',
                time: res.result.successTime
              }
            ]
            if(res.result.merchantPhone==''){
              this.stepList[1].description = '审核账号：系统审核，极速退款'
            }
          } else if (res.result.status == 5) {
            this.active = 2
            this.stepList = [{
                title: '提交申请',
                description: '',
                time: res.result.refundTime
              },
              {
                title: '商户拒绝退款',
                description: '审核账号：' + res.result.merchantPhone,
                time: res.result.refuseTime
              },
            ]
          }
        })
      },
    },
  };

</script>
<style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }

    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }

  .main {
    padding: 20px 0 30px;
  }

  .cause {
    margin-top: 30px;
  }

</style>
